<template>
  <div class="main" @click="change(false)">
    <!-- 搜索框-->
    <el-form>
      <el-form-item>
        <el-input
          v-model.trim="inputValue"
          placeholder="请输入图书标题"
        ></el-input>
      </el-form-item>
      <el-button type="primary" class="cha" @click="handleClick"
        >查询</el-button
      >
    </el-form>
    <!-- 表格 -->
    <Table
      :list="courseList"
      :editClick="editClick"
      :deleteHandle="deleteHandle"
    />

    <!-- 分页 -->
    <Pagination :currentChange="currentChange"></Pagination>
  </div>
  <EditPop
    :popShow="popShow"
    v-if="popShow"
    :message="courseItemState.message"
    :confirmClick="confirmClick"
  />
</template>
<script setup>
import Table from './myTable.vue'
import EditPop from './EditPop.vue'
import Pagination from './myPagination.vue'
import { ElMessage } from 'element-plus'
import { reactive, ref, computed, onMounted } from 'vue'
import { getBook, changeBook, deleteBook } from '../api/index'
import emitter from '../utils/eventBus'
// 初始化数据
const data = reactive({
  list: [],
  page: 1, // 默认展示第一页
  total: 15, // 图书总数
  sideCategory: '文学', // 图书的分类
})

// 课程列表数据获取和课程类目切换逻辑
const getBookData = async (query) => {
  const category = query?.category || data.sideCategory
  const page = query?.page || 1
  const size = query?.size || 5
  const res = await getBook({ category, page, size })
  // 筛选符合分类的课程
  data.list = res.data?.list.filter((item) => item.category === category)
  data.total = res.data.total
}

onMounted(() => {
  getBookData()
  // 监听课程类目tab切换
  emitter.on('course', (val) => {
    data.sideCategory = val
    data.page = 1
    getBookData({ category: val, page: 1 })
  })
})

// 分页逻辑
const currentChange = (val) => {
  if (val === 'pre') {
    if (data.page > 1) {
      data.page--
    } else {
      ElMessage({
        message: '已经是第一页了！！！',
        type: 'warning',
        showClose: true,
      })
    }
  }
  if (val === 'next') {
    if (data.page < Math.ceil(data.total / 5)) {
      data.page++
    } else {
      ElMessage({
        message: '已经是最后一页了！！！',
        type: 'warning',
        showClose: true,
      })
    }
  }
  // 请求图书的接口
  getBookData({ category: data.sideCategory, page: data.page })
}

// 搜索的逻辑
const inputValue = ref('')
const courseList = computed(() => {
  // ？表示接口还未请求时数据为空不使用filter 有数据了再用
  return data.list?.filter((item) => {
    return item.title.indexOf(inputValue.value) >= 0
  })
})
// 搜索的按钮
const handleClick = () => {
  if (inputValue.value) {
    ElMessage({
      message: '查询成功',
      type: 'success',
    })
  } else {
    ElMessage({
      message: '请输入搜索内容',
      type: 'error',
    })
  }
}

// 修改函数
const changeBookData = async (query) => {
  const { title, price, id } = query
  const res = await changeBook({ title, price, id })
  if (res.data?.message) {
    ElMessage({
      message: res.data.message,
      type: 'success',
    })
  }
}
// 编辑的数据
const courseItemState = reactive({
  message: {},
})

// 控制编辑弹窗的展示变量
const popShow = ref(false)

// 控制编辑弹窗的展示方法
const isShowPop = (show) => {
  popShow.value = show
}

// 编辑的按钮
const editClick = (val) => {
  isShowPop(true)
  courseItemState.message = val
}

// 取消和确认按钮逻辑
const confirmClick = (val) => {
  if (val === 'cancel') {
    isShowPop(false)
  } else if (
    val.title !== courseItemState.message.title ||
    val.price !== courseItemState.message.price
  ) {
    // 更改对应图书的title或者price
    data.list.map((item) => {
      if (item.id === val.id) {
        item.title = val.title
        item.price = val.price
      }
    })

    // 关闭弹窗
    isShowPop(false)

    // 修改接口的调用
    changeBookData({ title: val.title, price: val.price, id: val.id })
  } else {
    ElMessage({
      showClose: true,
      message: '没发现有更改的内容',
      type: 'warning',
    })
  }
}

// 删除的函数
const deleteBookData = async (query) => {
  const res = await deleteBook({ id: query })
  if (res.data?.message) {
    ElMessage({
      message: res.data.message,
      type: 'success',
    })
  }
  // 当前页的数据清零时，重置到第一页
  if (data.list.length === 0 && data.page > 1) {
    getBookData({ category: data.sideCategory, page: 1 })
  }
}

// 图书删除逻辑
const deleteHandle = (val) => {
  if (val) {
    data.list = data.list.filter((item) => {
      return item.id !== val
    })
    // 删除接口的调用
    deleteBookData(val)
  }
}

// 隐藏数据可视化
const change = (flag) => {
  emitter.emit('change', flag)
}
</script>
<style lang="less" scoped>
.el-form {
  display: flex;
}

.main {
  background-color: #fff;
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;

  .input-with-select {
    width: 400px;
    margin-bottom: 40px;
  }
}

:deep(.el-table__header-wrapper) {
  position: fixed;
  z-index: 20;
}

:deep(.el-table__inner-wrapper) {
  overflow: hidden;
}

:deep(.el-table__body-wrapper) {
  margin-top: 40px;
}

:deep(.el-input__inner) {
  width: 300px;
  margin-right: 10px;
}

:deep(.warning-row) {
  --el-table-tr-bg-color: var(--el-color-warning-light-9) !important;
  height: 140px !important;
}

.table {
  height: 80vh;
  width: 85vw;
  overflow: hidden;
  overflow-y: scroll;
}

.table::-webkit-scrollbar {
  display: none;
}

.cha {
  margin-left: 10px;
}
</style>
